<template>
<div>
    <div class="common-form">
      <span>{{curItem.name}}</span>
    </div>
    <el-form size="small" :model="curItem" label-width="100px">
      <div class="f16 gray3 form-subtitle">{{$t('page.style_setting')}}</div>
      <div class="form-item">
        <div class="form-label">{{$t('page.footer_bg_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.background"
          ></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.background" />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'background', '#F2F2F2')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
      <!--上下边距-->
      <div class="form-item">
        <div class="form-label">{{$t('page.margin_top_label')}}</div>
        <el-slider
          v-model="curItem.style.paddingTop"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--上下边距-->
      <div class="form-item">
        <div class="form-label">{{$t('page.margin_bottom_label')}}</div>
        <el-slider
          v-model="curItem.style.paddingBottom"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--左右边距-->
      <div class="form-item">
        <div class="form-label">{{$t('page.image_margin')}}</div>
        <el-slider
          v-model="curItem.style.paddingLeft"
          :max="180"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--左右边距-->
      <div class="form-item">
        <div class="form-label">{{$t('page.border_radius_top_label')}}</div>
        <el-slider
          v-model="curItem.style.topRadio"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--左右边距-->
      <div class="form-item">
        <div class="form-label">{{$t('page.border_radius_bottom_label')}}</div>
        <el-slider
          v-model="curItem.style.bottomRadio"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <template v-if="curItem.data && curItem.data.length > 0">
        <draggable
          v-model="curItem.data"
          group="people"
          item-key="index"
          class="draggable-list"
        >
          <template #item="{  element,  index}">
            <div class="d-c-c param-img-item navbar">
              <div class="d-c d-c-c" style="margin-right: 28px">
                <div class="icon">
                  <img
                    v-img-url="element.imgUrl"
                    alt=""
                    @click="$parent.onEditorSelectImage(element, 'imgUrl')"
                  />
                </div>
              </div>
              <div class="right">
                <el-icon
                  class="el-icon-DeleteFilled"
                  @click="$parent.onEditorDeleleData(index, selectedIndex)"
                  ><CloseBold
                /></el-icon>
                <div class="url-box mb16 flex-1 d-s-c ww100">
                  <span class="key-name">{{$t('page.name')}}</span>
                  <el-input
                    maxlength="6"
                    show-word-limit
                    disabled
                    :value="$t('page.icon_text') + (index + 1)"
                  ></el-input>
                </div>
                <div class="d-s-c ww100">
                  <div class="url-box flex-1 d-s-c">
                    <span class="key-name">{{$t('page.link')}}</span>
                    <el-input
                      @click="changeLink(index)"
                      v-model="element.linkUrl"
                    >
                      <template #suffix>
                        <el-icon color="#333" size="16px"
                          ><ArrowRight
                        /></el-icon>
                      </template>
                    </el-input>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </draggable>
      </template>
      <div class="d-c-c pb16">
        <el-button plain type="primary" @click="$parent.onEditorAddData"
          >{{$t('page.add_one_button')}}</el-button
        >
      </div>
    </el-form>
    <Setlink
      v-if="is_linkset"
      :is_linkset="is_linkset"
      @closeDialog="closeLinkset"
      >{{$t('page.select_link')}}</Setlink
    >
  </div>
</template>

<script>
import Setlink from "@/components/setlink/Setlink.vue";
import draggable from "vuedraggable";
export default {
  components: {
    Setlink,
    draggable
  },
  data() {
    return {
      /*是否选择链接*/
      is_linkset: false,
      index: null
    };
  },
  created() {
    this.curItem.style.paddingTop = parseInt(this.curItem.style.paddingTop);
    this.curItem.style.paddingLeft = parseInt(this.curItem.style.paddingLeft);
  },
  props: ["curItem", "selectedIndex"],
  methods: {
    /*选择链接*/
    changeLink(index) {
      this.is_linkset = true;
      this.index = index;
    },
    /*获取链接并关闭弹窗*/
    closeLinkset(e) {
      this.is_linkset = false;
      this.curItem.data[this.index].linkUrl = e.url;
      //                this.curItem.data[this.index].name = e.name;
      this.curItem.data[this.index].name = $t("page.link_to") + " " + e.type + " " + e.name;
    }
  }
};
</script>

